<template>
  <div>
    <div id="calendar">
        <div>
            <button onclick="lastMonth();"><img src="img/left.png"/></button>
            <span id="dqrq"></span>
            <button onclick="nextMonth();"><img src="img/right.png"/></button>
        </div>
        <div>
            <div class="everyday">日</div>
            <div class="everyday">一</div>
            <div class="everyday">二</div>
            <div class="everyday">三</div>
            <div class="everyday">四</div>
            <div class="everyday">五</div>
            <div class="everyday">六</div>
        </div>
        <div id="day"></div>
    </div>
</div>
</template>

<script>
export default {
    name: 'Calender',
    methods:{
        count(){
            if(month!=2){
                if((month==4)||(month==6)||(month==9)||(month==11)){
                    days=30;
                }else{
                    days=31;
                }
            }else{
                if((year%4)==0&&(year%100)!=0||year%400==0){
                    days=29;
                }else{
                    days=28;
                }
            }
        },
        //输出当前日期
        showMonth(){
            var year_month=year+"年"+month+"月"+day+"日";
            document.getElementById("dqrq").innerHTML=year_month;
        },

        showDate(){
            showMonth();
            count();
            var firstdate=new Date(year,month-1,1);
            var xq=firstdate.getDay();
            var daterow=document.getElementById("day");
            daterow.innerHTML="";
            if(xq!=0){
                for(var i=0;i<xq;i++){
                    var dayElement=document.createElement("div");
                    dayElement.className="everyday";
                    daterow.appendChild(dayElement);
                }
            }
            for(var j=1;j<=days;j++){
                var dayElement=document.createElement("div");
                dayElement.className="everyday";
                dayElement.innerHTML=j+"";
                if(j==day){
                    dayElement.style.color="red";
                }
                daterow.appendChild(dayElement);
            }
        },
        //上个月
        lastMonth(){
            if(month>1) {
                month=month-1;
            }else{
                month=12;
                year=year-1;
            }
            showDate();
        },
        //下个月
        nextMonth(){
            if(month<12) {
                month=month+1;
            }else{
                month=1;
                year=year+1;
            }
            showDate();
        }
    }
}
</script>

<style>
div{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
#calendar{
    border-bottom: 1px black solid;
    width:400px;
    margin:auto;
}
button{
    border:none;
    background-color: white;
    width:20px;
    height: 20px;
}
#month{

    width: 320px;
    float:left;
    height: 40px;
    margin-top: 0;
    margin-bottom: 0;
}
.everyday{
    width:56px;
    float: left;
}
</style>